<!-- 专家回答 -->
<template>
	<view class="container" v-if="detail.reply && detail.reply.length">
		<view class="content" v-for="item in detail.reply" :key="item.id">
			<text class="text">{{item.content}}</text>
			<!-- <view class="btn-group">
				<button class="btn btn-transition-scale9 border-1px" open-type="share">
					<image class="icon" src="/pagesC-my/static/images/share.svg" mode="widthFix"></image>
					<text class="text">分享</text>
				</button>
				<button class="btn btn-transition-scale9 border-1px" @click="handleClickLike()">
					<image v-if="likeActive" class="icon" src="/pagesC-my/static/images/like-active.svg" mode="widthFix"></image>
					<image v-else class="icon" src="/pagesC-my/static/images/like.svg" mode="widthFix"></image>
					<text class="text">0</text>
				</button>
			</view> -->
		</view>
	</view>
	<c-empty-data v-else empty-text="暂无回答"></c-empty-data>
</template>

<script setup>
	import { ref } from 'vue';
	
	const props = defineProps({
		detail: { // 详情数据
			type: Object,
			default: () => ({})
		}
	});

	// const likeActive = ref(false);
	// const handleClickLike = () => {
	// 	likeActive.value = !likeActive.value;
	// }
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 25rpx 30rpx;
	}

	.content {
		padding: 22rpx;
		background-color: white;
		border-radius: 20rpx;
		
		& + .content {
			margin-top: 24rpx;
		}

		.text {
			display: block;
			font-size: 28rpx;
			color: #222222;
			line-height: 2;
		}

		.btn-group {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			margin-bottom: 20rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 208rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				border: 1rpx solid #ECECEC;
				
				&::after {
					border-color: #ECECEC;
					border-radius: 100px;
				}

				&+.btn {
					margin-left: 59rpx;
				}

				.icon {
					width: 32rpx;
					height: 32rpx;
				}

				.text {
					font-size: 24rpx;
					color: #222222;
					margin-left: 14rpx;
				}
			}
		}
	}
</style>